<template>
  <div class="common-layout">
    <el-container>
      <el-header class="common-header">类型管理</el-header>
      <el-main>
        <div>
          <el-table :data="types" style="width: 100%" max-height="550">
            <el-table-column fixed prop="id" label="ID" width="100" />
            <el-table-column prop="type_name" label="类型" width="600" />
            <el-table-column
              prop="updated_at"
              label="修改时间"
              :formatter="formatTime"
              width="200"
            />
            <el-table-column
              prop="is_active"
              label="状态"
              :formatter="isDeletedFormatter"
              width="200"
            />
            <el-table-column fixed="right" label="操作" min-width="60">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="large"
                  @click.prevent="updateRow(scope.row)"
                >
                  编辑类型
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="mt-4" style="width: 100%" @click="addType = true">
            新增类型
          </el-button>
        </div>
      </el-main>
    </el-container>
  </div>
    <!-- 弹出窗 -->
    <div>
      <el-dialog v-model="addType" title="新增类型" width="500" center>
        <div>
          <el-form
            ref="typeRef"
            :model="form"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="类型" prop="type_name">
              <el-input v-model="form.type_name" required />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addNotice = false">取消</el-button>
            <el-button type="primary" @click="addTypeSubmit">
              确认新增
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted } from "vue";
import requestUtil from "../../../utils/request";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import qs from "qs";

// 类型列表
const types = ref([]);

// 类型列表加载方法
const loadTypes = async () => {
try {
  let result = await requestUtil.post(
    "articleType/select?",
    qs.stringify({
    })
  );
  const data = result.data;
  if (data.code === 200) {
      console.log(data.types);
      types.value = data.types;
  } else {
    ElMessage.error("数据加载失败：" + data.info);
  }
} catch (error) {
  ElMessage.error("请求失败：" + error.message);
}
};

// 状态转换方法
const isDeletedFormatter = (row) => {
  return row.is_active === true ? "启用" : "不启用";
};

// 统一时间格式化方法
const formatTime = (row, column, cellValue) => {
  return dayjs(cellValue).format("YYYY-MM-DD HH:mm:ss");
};


// 修改公告状态
const updateRow =async (row) => {
    try {
    let result = await requestUtil.post(
       "articleType/operate?",
        qs.stringify({
        id: row.id,
        type_name:row.type_name,
        is_active:row.is_active === true ? 0 : 1
      })
    )
    if (result.data.code === 200) {
      ElMessage.success(result.data.info)
      loadTypes() // 重新加载数据
    } else {
      ElMessage.error(result.data.info)
    }
  } catch (error) {
    ElMessage.error("请求失败：" + error.message)
  }
};



//添加类型弹出窗
const addType = ref(false);
//新增类型的表单数据
const typeRef = ref(null);
const form = ref({
  id: -1,
  is_active:0,
  type_name:" "
});
// 表单检测
const rules = ref({
  type_name: [{ required: true, message: "不能为空", trigger: "blur" }],
});
//新增类型的提交事件 当id为-1时，为添加，否则为修改
const addTypeSubmit = () => {
  typeRef.value.validate(async (valid) => {
    if (valid) {
      // 发送新增类型请求
      let result = await requestUtil.post(
        "articleType/operate?",
        qs.stringify(form.value)
      );
      let data = result.data;
      if (data.code == 200) {
        console.log(data);
        types.value = data.types; //更新数据
        addType.value = false; //隐藏弹出窗
        ElMessage.success(data.info);
        // 重置表单
        typeRef.value.resetFields();
      } else {
        ElMessage.error(data.info);
      }
    }
  });
};

// 页面加载时加载类型列表
onMounted(() => {
  loadTypes();
});

</script>  
<style scoped>
.common-header {
  text-align: center;
  margin: 5px;
  font-size: 30px;
  color: rgb(44, 47, 245);
}
</style>